<template>
  <el-row :gutter="24" class="notice-publish-wrapper">
    <el-col :span="12">
      <el-card shadow="never">
        <div class="preview-title"><i class="el-icon-view"></i> 公告实时预览</div>
        <div class="preview-content" v-html="content"></div>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card shadow="never">
        <div class="editor-title"><i class="el-icon-edit"></i> 公告编辑</div>
        <el-form :model="form" label-width="80px">
          <el-form-item label="公告标题">
            <el-input v-model="form.title" placeholder="请输入公告标题" />
          </el-form-item>
          <el-form-item label="发布时间">
            <el-date-picker v-model="form.publishTime" type="datetime" placeholder="选择发布时间" style="width: 100%" />
          </el-form-item>
          <el-form-item label="公告内容">
            <div ref="editor" class="editor-box"></div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSave">保存</el-button>
            <el-button type="success" @click="handlePublish">定时发布</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import E from 'wangeditor';

export default {
  name: 'NoticePublish',
  data() {
    return {
      editor: null,
      content: '',
      form: {
        title: '',
        publishTime: '',
        content: '',
      },
    };
  },
  mounted() {
    this.initEditor();
  },
  beforeDestroy() {
    if (this.editor) this.editor.destroy();
  },
  methods: {
    initEditor() {
      this.editor = new E(this.$refs.editor);
      this.editor.config.onchange = (html) => {
        this.content = html;
        this.form.content = html;
      };
      this.editor.config.uploadImgShowBase64 = true; // 模拟图片上传
      this.editor.config.uploadVideoHooks = {
        before: () => {},
        success: (xhr, editor, result) => {},
        fail: () => {},
        error: () => {},
        timeout: () => {},
        customInsert: (insertVideoFn, result) => {
          // 模拟视频上传，直接插入演示视频
          insertVideoFn('https://www.w3schools.com/html/mov_bbb.mp4');
        },
      };
      this.editor.config.customUploadImg = (resultFiles, insertImgFn) => {
        // 模拟图片上传，直接转base64
        const reader = new FileReader();
        reader.onload = (e) => {
          insertImgFn(e.target.result);
        };
        reader.readAsDataURL(resultFiles[0]);
      };
      this.editor.create();
    },
    handleSave() {
      this.$message.success('公告已保存（模拟）');
    },
    handlePublish() {
      if (!this.form.publishTime) {
        this.$message.warning('请选择发布时间');
        return;
      }
      this.$message.success('公告已定时发布（模拟）');
    },
  },
};
</script>

<style scoped>
.notice-publish-wrapper {
  padding: 24px;
  min-height: 600px;
}
.preview-title, .editor-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  color: #409EFF;
  display: flex;
  align-items: center;
}
.preview-title i, .editor-title i {
  margin-right: 6px;
}
.preview-content {
  min-height: 320px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 16px;
  font-size: 15px;
  color: #333;
}
.editor-box {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  min-height: 320px;
  background: #fff;
}
</style> 